<template>
  <div>
    <div class="headerbox">
      <div class="header">
        <div class="headerL">
          <a onclick="javascript:history.back(-1)"
             class="goback"><img src="/assets/images/goback.png" /></a>
        </div>
        <div class="headerC0">
          <div class="ssdiv">
            <img src="/assets/images/ss.png" /><input name=""
                   type="text"
                   placeholder="输入关键字..." />
          </div>
        </div>
        <div class="headerR">
          <a><img src="/assets/images/tr.png"
                 @click="onType" /></a>
        </div>
      </div>
    </div>
    <div class="clear"></div>
    <div class="shopType">
      <van-dropdown-menu>
        <van-dropdown-item v-model="flag"
                           :options="option1"
                           @change="onFlag" />
        <van-dropdown-item v-model="OrderBy"
                           :options="option2"
                           @change="onOrderBy" />
      </van-dropdown-menu>
    </div>
    <div class="clear"></div>
    <div class="hbox"></div>
    <div class="mainWarp"
         style="background:#f3f3f3">
      <ul class="proul"
          v-if="ProData.length > 0">
        <li v-for="item of ProData"
            :key="item.id">
          <router-link :to="{path:'/product/product/info',query:{proid:item.id}}"><img :src="item.cover_cdn" /></router-link>
          <router-link :to="{path:'/product/product/info',query:{proid:item.id}}">
            <p class="tit">{{item.name}}</p>
          </router-link>
          <!-- 如果会员价大于0 则返回会员价 否则返回原价 -->
          <div class="price"
               v-if="item.vip_price > 0">
            <p>￥{{item.vip_price}}<span>￥{{item.price}}</span></p>
          </div>
          <div class="price"
               v-else>
            <p>￥{{item.price}}</p>
          </div>
        </li>
      </ul>
      <ul class="proul"
          v-else>
        <van-empty description="暂无商品" />
      </ul>
    </div>
    <div class="clear"></div>
    <div class="h54"></div>
    <div class="clear"></div>
    <Menus />
    <van-popup :show="show"
               round
               position="bottom">
      <van-picker :columns="columns"
                  @cancel="show = false"
                  @confirm="onConfirm" />
    </van-popup>
  </div>
</template>
<script>
import Menus from 'components/common/Menus.vue'
export default {
  components: {
    Menus,
  },
  created() {
    let typeid = this.$route.query.typeid

    this.typeid = Number(typeid)

    this.Type()

    this.ProList()
  },
  data() {
    return {
      LoginUser: this.$cookies.get('LoginUser')
        ? this.$cookies.get('LoginUser')
        : {},
      typeid: 0,
      show: false,
      flag: 0,
      OrderBy: 'id',
      ProData: [],
      option1: [
        { text: '全部商品', value: 0 },
        { text: '新品商品', value: 1 },
        { text: '热销商品', value: 2 },
        { text: '推荐商品', value: 3 },
      ],
      option2: [
        { text: '默认排序', value: 'id' },
        { text: '价格排序', value: 'price' },
        { text: '库存排序', value: 'stock' },
      ],
      columns: [],
      TypeData: [],
    }
  },
  methods: {
    onType() {
      this.show = true
    },
    async Type() {
      let result = await this.$api.ProductType()

      // console.log(result)

      if (result.code === 1) {
        // let data = Array.from(result.data)
        // 转数组
        // let data = Object.values(result.data)

        let data = []

        // 遍历result.data并别名为item
        for (let item of result.data) {
          data.push(item.name)
        }

        this.TypeData = result.data

        this.columns = data
      }
    },
    onChange() {},
    onCancel() {},
    onConfirm(item, index) {
      // console.log(item)
      let data = this.TypeData[index]
      this.typeid = data.id
      this.show = false
      this.ProList()
    },
    // 此异步是为了获取热门产品
    async ProList() {
      let data = {
        typeid: this.typeid,
        userid: this.LoginUser.id ? this.LoginUser.id : 0,
        flag: this.flag,
        OrderBy: this.OrderBy,
      }

      let result = await this.$api.ProductIndex(data)
      console.log(result)
        console.log(result.data)

      if (result.code === 1) {
        this.ProData = result.data
      }
    },
    onFlag(item) {
      //   console.log(item)
      this.flag = item
      this.ProList()
    },
    onOrderBy(item) {
      //   console.log(item)
      this.OrderBy = item
      this.ProList()
    },
  },
}
</script>